<script setup lang='ts'>
import BpmnViewer from 'bpmn-js';
 import BpmnModeler from 'bpmn-js/lib/Modeler';
import { onMounted, ref } from 'vue';
    import {
      xmlStr
    } from '../../mock/xmlStr'; // 这里是直接引用了xml字符串
    import testDiagram from '../../mock/diagram.bpmn';

    const canvasRef = ref()
    const bpmnModeler = ref(null)
    const init = () => {
        const canvas = canvasRef.value;
        if(!canvas) {
            return;
        }
        bpmnModeler.value = new BpmnModeler({
            container: canvas
        })
        createNewDiagram()
        //   // 添加错误事件监听
        // bpmnModeler.value.on('import.done', (event) => {
        //     if (event.error) {
        //     console.error('导入错误:', event.error);
        //     }
        // });
        // var viewer = new BpmnViewer({
        //     container: '#canvas'
        // });

        // viewer.importXML(testDiagram, function(err) {
        // if (!err) {
        //     console.log('success!');
        //     viewer.get('canvas').zoom('fit-viewport');
        // } else {
        //     console.log('something went wrong:', err);
        // }
        // });


    }
    const createNewDiagram = () => {
      bpmnModeler.value.importXML(xmlStr, (err) => {
            if(err) {

            } else {
                success()
            }
        })
    }
    const success = () => {

    }

    onMounted(() => {
        init()
    })
</script>
<template>
  <div class="containers">
    <div class="canvas" ref="canvasRef"></div>
  </div>
</template>


<style lang='scss' scoped>
.containers{
	position: absolute;
	background-color: #ffffff;
	width: 100%;
	height: 100%;
}
.canvas{
	width: 100%;
	height: 100%;
}
.panel{
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>